<style lang="scss" scoped>
	@import "../assets/style/login.scss";
</style>
<template>
    <section class="container0">
       <div class="home_top">
       		<img src="../assets/images/logo.png"/>
       </div>
        <div class="home_menu">
        	<span class="m1" @click="$router.push({name: 'receipt'})">收款单</span>
        	<span class="m2">收支总账</span>
        	<span class="m3">付款单</span>
        	<span class="m4" @click="$router.push({name: 'receiptList'})">收款管理</span>
        	<span class="m5">付款管理</span>
        </div>
        <div class="home_footer">
        	<p>上海市天光禅寺 财务管理系统</p>
        </div>
        <el-dialog :show-close="false" width='400px' top='195px' class="dialog_login" :close-on-click-modal="false" :close-on-press-escape="false"	 :visible.sync="dialogFormVisible">
		   <div class="user-login" v-show="mode == 0">
		      <div class="form-container">
		        <h4 class="form-title">登录</h4>
		        <el-form ref="loginForm" :model="loginForm" :rules="rulesLogin" label-width="0">
		          <div class="form-items">
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="username" >
		                  <div class="form-line">
		                    <i class="el-icon-mobile-phone input-icon"></i>
		                    <el-input placeholder="姓名" v-model="loginForm.username" ></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="password" >
		                  <div class="form-line">
		                    <i class="el-icon-view input-icon"></i>
		                    <el-input type="password" placeholder="密码" @keyup.native.enter="submitBtn('loginForm')" v-model="loginForm.password"></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class=form-item>
		              <el-col>
		                <el-form-item>
		                  <el-checkbox v-model="checkPassword"  @change="rememberMeOrNot"  class="checkbox">记住账号</el-checkbox>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class="form-item">
		              <el-button type="primary" class="submit-btn" size="small" @click="submitBtn('loginForm')">
		                登 录
		              </el-button>
		            </el-row>
		          </div>
		          <el-row class="tips">
		            <span @click="switchMode(1)" class="link">
		              立即注册
		            </span>
		            <span class="line">|</span>
		            <span @click="switchMode(2)" class="link">
		              忘记密码
		            </span>
		          </el-row>
		        </el-form>
		      </div>
		   </div>
		   <div class="user-login"  v-show="mode==1" >
		      <div class="form-container">
		        <h4 class="form-title">注册</h4>
		        <el-form :rules="rulesReg" ref="regForm" :model="regForm" label-width="0" >
		          <div class="form-items">
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="userName"  >
		                  <div class="form-line">
		                    <i class="el-icon-mobile-phone input-icon"></i>
		                    <el-input placeholder="姓名" v-model="regForm.userName" ></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="passWord"  >
		                  <div class="form-line">
		                    <i class="el-icon-view input-icon"></i>
		                    <el-input  type="password" placeholder="请输入密码" v-model="regForm.passWord"></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="confirmPwd"  >
		                  <div class="form-line">
		                    <i class="el-icon-view input-icon"></i>
		                    <el-input  type="password" placeholder="请确认密码" v-model="regForm.confirmPwd"></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            
		            <el-row class="form-item">
		              <el-button type="primary" class="submit-btn" size="small" @click="submitBtn('regForm')">
		                	立即注册
		              </el-button>
		            </el-row>
		          </div>
		          <el-row class="tips">
		            <span @click="switchMode(0)" class="link">
		              已有账号？去登录
		            </span>
		          </el-row>
		        </el-form>
		      </div>
		   </div>
		   <div class="user-login" v-show="mode == 2">
		      <div class="form-container">
		        <h4 class="form-title">忘记密码</h4>
		        <el-form :rules="rulesForget" ref="forgetForm" :model="forgetForm"  label-width="0">
		          <div class="form-items">
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="userName" >
		                  <div class="form-line">
		                    <i class="el-icon-mobile-phone input-icon"></i>
		                    <el-input placeholder="姓名" v-model="forgetForm.userName"></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="passWord" >
		                  <div class="form-line">
		                    <i class="el-icon-view input-icon"></i>
		                    <el-input type="password" placeholder="输入新密码" v-model="forgetForm.passWord"></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>
		            <el-row class="form-item">
		              <el-col>
		                <el-form-item prop="confirmPwd">
		                  <div class="form-line">
		                    <i class="el-icon-view input-icon"></i>
		                    <el-input type="password" placeholder="确认新密码" v-model="forgetForm.confirmPwd"></el-input>
		                  </div>
		                </el-form-item>
		              </el-col>
		            </el-row>

		            <el-row class="form-item">
		              <el-button type="primary" class="submit-btn" size="small" @click="submitBtn('forgetForm')">
		                	确认修改
		              </el-button>
		            </el-row>
		          </div>
		          <el-row class="tips">
		            <span @click="switchMode(0)" class="link">
		              已有账号？去登录
		            </span>
		          </el-row>
		        </el-form>
		      </div>
		   </div>
        </el-dialog>
    </section>
</template>
<script>
    import UserDao from '@/api/UserDao';
    import baseUtil from "../utils/baseUtil";
    export default {
        data() {

            var checkRegUser= async (rule, value, callback) => {
                UserDao.findListNoPage({name:this.regForm.userName}).then((m)=>{
                    if(this.baseUtil.isNotBlankObj(m) && m.length>0){
                        callback(new Error('用户名已存在'))
                    }else {
                        callback()
                    }
                })
            }
            var checkForgetUser= (rule, value, callback) => {
                UserDao.findListNoPage({name:this.forgetForm.userName}).then((m)=>{
                    if(this.baseUtil.isNotBlankObj(m) && m.length>0){
                        callback()
                    }else {
                        callback(new Error('用户名不存在,请到注册页面进行注册'))
                    }
                })
            }
            var regPwd2= (rule, value, callback) => {
                if (!baseUtil.isNotBlank(value) ) {
                    callback(new Error('请再次输入密码!'))
                } else if (value !== this.regForm.passWord) {
                    callback(new Error('密码不一致!'))
                } else {
                    callback()
                }
            }
            var forgetPwd2= (rule, value, callback) => {
                if (!baseUtil.isNotBlank(value) ) {
                    callback(new Error('请再次输入密码!'))
                } else if (value !== this.forgetForm.passWord) {
                    callback(new Error('密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                dialogFormVisible: true,
				loginForm:{
                    username:localStorage.userName != null?localStorage.userName:null,
					password:localStorage.password != null?localStorage.password:null,
				},
                regForm: {
		          userName: null,
		          passWord: null,
				  confirmPwd:null
		        },
                forgetForm: {
                    userName: null,
                    passWord: null,
                    confirmPwd:null
                },
                isExist: true,
                checkPassword:localStorage.checkPassword != null?localStorage.checkPassword == 'true'?true:false:null,
				mode:0,
				rulesLogin:{
                    username:[
                        {required: true, message: '请输入姓名!', trigger: 'blur'},
                    ],
                    password:[
                        {required: true, message: '请输入密码!', trigger: 'blur'},
                    ],
				},
                rulesReg:{
                    userName:[
                        {required: true, message: '请输入姓名!', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符!'},
                        {pattern: /^[\u4E00-\u9FA50-9]+$/, message: '只能输入中文或数字!'},
                        {validator:checkRegUser, trigger: 'blur'}
					],
                    passWord:[
                        {required: true, message: '请输入密码!', trigger: 'blur'},
                        {pattern: /^[a-zA-Z0-9]{6,16}$/, message: '密码由字母或数字，6-16位组成!'}
					],
                    confirmPwd:[
                         {required: true, trigger: 'blur', validator:regPwd2}
					]
				},
                rulesForget:{
                    userName:[
                        {required: true, message: '请输入姓名!', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符!'},
                        {pattern: /^[\u4E00-\u9FA50-9]+$/, message: '只能输入中文或数字!'},
                        {validator:checkForgetUser, trigger: 'blur'}
                    ],
                    passWord:[
                        {required: true, message: '请输入密码!', trigger: 'blur'},
                        {pattern: /^[a-zA-Z0-9]{6,16}$/, message: '密码由字母或数字，6-16位组成!'}
                    ],
                    confirmPwd:[
                        {required: true, trigger: 'blur', validator:forgetPwd2}
                    ]
                },
            }
        },
        methods: {
            rememberMeOrNot() {
                if(this.checkPassword) {
                    localStorage.userName = this.loginForm.username
                    localStorage.password = this.loginForm.password
                }else {
                    this.loginForm.username = null;
                    this.loginForm.password = null;
                    localStorage.removeItem('userName');
                    localStorage.removeItem('password');
                }
                localStorage.checkPassword = this.checkPassword;
            },
            switchMode(mode) {
                switch(mode){
					case 0:
                        this.loginForm = {username:null,password:null}
                        this.resetForm('loginForm')
					    break;
                    case 1:
                        this.regForm = {userName:null, passWord:null,confirmPwd:null}
                        this.resetForm('regForm')
                        break;
                    case 2:
                        this.forgetForm = {userName:null, passWord:null,confirmPwd:null}
                        this.resetForm('forgetForm')
                        break;
				}
                this.mode = mode;
			},
           submitBtn(formName) {
                if(this.checkPassword) {
                    localStorage.userName = this.loginForm.username
                    localStorage.password = this.loginForm.password
                }else {
                    localStorage.removeItem('userName');
                    localStorage.removeItem('password');
                }
                localStorage.checkPassword = this.checkPassword;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
						switch(this.mode){
							case 0:   //登录
                                UserDao.findListNoPage({$and:[{name:this.loginForm.username},{password:this.$md5(this.loginForm.password)}]}).then((m)=>{
                                    if(this.baseUtil.isNotBlankObj(m) && m.length>0){
                                        this.$message({
                                            message: '登录成功',
                                            type: 'success',
                                        });
                                        this.$store.dispatch('LoginAction', {username:this.loginForm.username});
                                        this.$store.dispatch('PushCurrentMenu', -1);
                                        this.$router.push({ path: '/' })
                                        // this.dialogFormVisible = false
                                    }else {
                                        this.$message({
                                            message: '用户名或密码错误',
                                            type: 'error',
                                        });
                                    }
                                }).catch(()=>{
                                    this.$message({
                                        message: '用户名或密码错误',
                                        type: 'error',
                                    });
                                })
                                break;
							case 1:
							 let user = {name:this.regForm.userName,password:this.$md5(this.regForm.passWord),createAt:new Date(),deleted:0}  //md5加密，应该再加盐
							     UserDao.insertData(user)
                                this.$message({
                                    message: '注册成功',
                                    type: 'success',
                                });
                                this.switchMode(0)
                                break;
							case 2:  //修改
							     UserDao.updateData({name:this.forgetForm.userName},{password:this.$md5(this.forgetForm.passWord)}).then((m)=>{
                                         this.$message({
                                             message: '修改成功',
                                             type: 'success',
                                         });
                                         this.switchMode(0)
								 }).catch(()=>{
                                     this.$message({
                                         message: '修改失败',
                                         type: 'err',
                                     });
								 })
							    break;
						}
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
		mounted(){
		}
    }
</script>